<template>
    <div class="con">
        <img src="../assets/images/logo.png" alt="" class="logo">
        <div class="header">
            <img src="../assets/images/giftwood.png" alt="" class="header">
         
            <img :src="siteImageUrl+gift_img" alt="" class="title">

        </div>
        <!-- 礼物列表 -->
        <div class="giftList">
            <ul>
                <li v-for="item in gift_list">
                    <img src="../assets/images/pic_gift_wood.png" alt="">
                    <img :src="siteImageUrl+item.thumb" alt="" class="giftImg">
                    <img :src="siteImageUrl+item.title_img" alt="" class="giftText">
                    <a href="javascript:;" @click="check(item)" class="check">
                        <img src="../assets/images/btn_clickbox.png" alt="" >
                        <img src="../assets/images/yes.png" alt="" :class="{selectYes:item.checked}">
                    </a>
                </li>  
                              
            </ul>
        </div>

        <img src="../assets/images/btn_Enter.png" alt="" class="enter" @click="enter()" v-show="show">
      
    </div>
</template>

<script>
export default {
    name: "gift",
    data() {
        return {
            gift_list: [],
            id:"",
            show:true,
            gift_img:''
        };
    },
    beforeCreate() {
        document.getElementsByTagName("body")[0].className = "bg_MyPoints";
    },
    methods: {
        check(item){
            this.id=item.id;          
            for (var i in this.gift_list) {
                this.gift_list[i].checked = false;                          
            }
            item.checked=true;
            console.log(this.gift_list);
            console.log(this.id)
        },
        enter(){
            this.$router.push({ name: "giftQRCode", params: { id: this.id} })

        }

        
    },
    mounted: function() {
        
        var param = new URLSearchParams();
        param.append("member_id",  $.cookie('osc_member_id'));
        param.append("token", "1" ,$.cookie('osc_member_token'));
        param.append("gift_category_id", this.$route.params.id);       
        this.axios({
            method: "post",
            url: `${this.siteUrl}/piaowu/api/gift_list`,
            data: param
        })
        .then(response => {
            if (response.data.status == 1) {               
                this.gift_list=response.data.data;
                    this.gift_list.forEach((item, index) => {
                        if (typeof item.checked == 'undefined') {
                        this.$set(item, "checked", false)
                    }
                 })
                console.log(this.gift_list)   
               if(this.gift_list.length==0){
                   this.show=false;
                   alert("当前礼物无库存");

               }                           
            } else {
                alert("请求失败："+response.data.msg);
            }
        })
        .catch(function(error) {
            console.log(error);
        });

      console.log($.cookie('osc_member_id'))
      this.gift_img=localStorage.getItem('gift_img');
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    text-align: center;
}
.con .header {
    width: 100%;
    position: relative;
    
}
.con .logo{
    width: 34%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,30%);

}
.con .title{
    position: absolute;
    left: 50%;
    width: 50%;
    top:50%;
    transform:translate(-50%, 0%);
}

.giftList {
    overflow: hidden;
}

.giftList li {
    width: 50%;
    float: left;
    position: relative;
}
.giftList li img:first-child{
    width: 90%;
}

.giftList .giftImg {
    position: absolute;
    width: 50%;
    left: 50%;
    top: 28%;
    transform: translate(-50%,0%)
}

.giftList .giftText {
    position: absolute;
    left: 8%;
    bottom: -6%;
    width: 70%;
}

.giftList .check {
    position: absolute;
    right: 12%;
    bottom: -1%;
    width: 24px;
    height: 24px;
 

}

.con .enter{
    width: 50%;
    margin-top: 20px;
}
.con .selectYes {
  width: 22px;
  height: 22px;
  position: absolute;
  left: 1px;
  top:0px;

}
</style>
